<template>
  <div class="process-status-wrapper">
    <div class="process-status-img-wrapper">
      <img
        v-if="processStatus === '1'"
        src="../svg/ing.svg"
        alt=""
        width="120px"
        height="120px"
      />
      <img
        v-if="processStatus === '2'"
        src="../svg/pass.svg"
        alt=""
        width="120px"
        height="120px"
      />
      <img
        v-if="processStatus === '3'"
        src="../svg/reject.svg"
        alt=""
        width="120px"
        height="120px"
      />
      <img
        v-if="processStatus === '4'"
        src="../svg/revocation.svg"
        alt=""
        width="120px"
        height="120px"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps({
  processStatus: {
    type: String,
    default: () => {
      return '';
    }
  }
});

</script>

<script lang="ts">
export default {
  name: 'ProcessStatus'
};
</script>

<style scoped lang="less">
.process-status-wrapper {
  width: 100%;
  height: 10px;
  position: relative;
}

.process-status-img-wrapper {
  z-index: 9999;
  position: absolute;
  right: 0;
  top: -40px;
}
</style>